<template>
    <div class="app">
        <indexLeft ref="projleft" @filtercatalogue='filtercatalogue' @delectclick='delectclick'></indexLeft>
        <div class="document-right">
            <div class="app-container">
                <div class="filter-container">
                    <el-button-group>
                        <el-button v-if="isNUllchang(templateAdd.dirId)" icon="el-icon-plus" type="primary" @click="btnCreate" class="filter-item">新增
                        </el-button>
                    </el-button-group>
                </div>
                <taskIndex @editChildren='editChildren' :taskForm='taskForm' @createdChildren='createdChildren' @delChildren='delChildren'></taskIndex>
                <el-dialog title="新增任务" :visible.sync="dialogFormVisible" :close-on-click-modal='closeon'>
                    <el-form ref="dataForm" :rules="rules" :model="templateAdd" label-position="right" label-width="110px">
                        <el-form-item label="任务阶段" prop="roleId">
                            <multipleChoiceTags :key="times" :tags="templateAdd.tags" @tagChoose="tagChoose" type="01" style="width: 100%;height:100%"></multipleChoiceTags>
                        </el-form-item>
                        <el-form-item label="任务名称" prop="name">
                            <el-input v-model="templateAdd.name" />
                        </el-form-item>
                        <el-form-item label="任务简介">
                            <el-input v-model="templateAdd.content" />
                        </el-form-item>
                        <el-form-item label="附件" prop="docFilePath">
                            <div style="display: flex;flex-direction: column;" @click.stop="">
                                <span v-for="item in templateAdd.docFilePath" v-if="templateAdd.docFilePath.length > 0" style="font-size: 16px;margin-bottom: 5px;color: #333333;" @click.stop="">{{ item.fileName }}</span>
                            </div>
                            <singlefileUpload style="width:100px" :ruleFormdocFilePath='templateAdd.docFilePath' ref="upload" @uploadSave="uploadSave" @returnUrl="returnUrl" @uploadListShow="uploadListShow" @uploadListDel="uploadListDel">
                                <template v-slot:openDialog>
                                    <el-button style="width: 100px;" plain>上传附件</el-button>
                                </template>
                            </singlefileUpload>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button icon="el-icon-close" @click="dialogFormVisible = false">取消</el-button>
                        <el-button icon="el-icon-check" type="primary" @click="templatesaveclick('dataForm')"> 确定</el-button>
                    </div>
                </el-dialog>
                <el-dialog title="修改任务" :visible.sync="EdidialogFormVisible" width="1000px" :close-on-click-modal='closeon'>
                    <el-form ref="dataForm" :rules="rules" :model="templateEdit" label-position="right" label-width="110px">
                        <el-form-item label="任务阶段" prop="roleId">
                            <multipleChoiceTags :key="times" :tags="templateEdit.tags" @tagChoose="tagChooseEdit" type="01" style="width: 100%;height:100%"></multipleChoiceTags>
                        </el-form-item>
                        <el-form-item label="任务名称" prop="name">
                            <el-input v-model="templateEdit.name" />
                        </el-form-item>
                        <el-form-item label="任务简介">
                            <el-input v-model="templateEdit.content" />
                        </el-form-item>
                        <el-form-item label="附件" prop="docFilePath">
                            <div style="display: flex;justify-content:space-between;align-items: center;" @click.stop="" v-for="(item,index) in templateEdit.docList" v-if="templateEdit.docList.length > 0">
                                <span style="font-size: 16px;margin-bottom: 5px;color: #333333;" @click.stop="">{{ item.name }}</span>
                                <i class="el-icon-delete" style="cursor: pointer;" @click="delClick(item,index)"></i>
                            </div>
                            <div style="display: flex;flex-direction: column;" @click.stop="">
                                 <span v-for="item in templateAdd.docFilePath" v-if="templateAdd.docFilePath.length > 0" style="font-size: 16px;margin-bottom: 5px;color: #333333;" @click.stop="">{{ item.fileName }}</span>
                            </div>
                            <singlefileUpload style="width:100px" ref="upload" :ruleFormdocFilePath='uploadFormEdit' @uploadSave="uploadSaveEdit" @returnUrl="returnUrlEdit" @uploadListShow="uploadListShowEdit" @uploadListDel="uploadListDelEdit">
                                <template v-slot:openDialog>
                                    <el-button style="width: 100px;" plain>上传附件</el-button>
                                </template>
                            </singlefileUpload>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <!-- <el-button icon="el-icon-close" @click="EdidialogFormVisible = false">取消</el-button> -->
                        <el-button icon="el-icon-check" type="primary" @click="templateEditclick('dataForm')"> 确定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>

</template>
<script>
import singlefileUpload from "@/components/upload/singlefileUpload";
import multipleChoiceTags from "@/components/select/multipleChoiceTags";
import indexLeft from "./components/left";
import taskIndex from "./components/index";
import { save as templatesave, getTreeData, del, update } from "@/api/template";
import { save as saveDoc, del as docdel, subTaskDoc } from "@/api/doc.js";
import Pagination from "@/components/Pagination";
import utils from "@/utils/utils";

export default {
    name: "",
    components: {
        indexLeft,
        Pagination,
        multipleChoiceTags,
        taskIndex,
        singlefileUpload,
    },
    data() {
        return {
            closeon: false,
            records: [],
            dialogFormVisible: false,
            EdidialogFormVisible: false,
            total: 0,
            listQuery: {
                current: 1,
                size: 20,
                dirId: "",
            },
            taskForm: [],
            rules: {
              name: [
                { required: true, message: '请输入活动名称', trigger: 'blur' },
              ],
            },
            uploadForm: [],
            uploadFormEdit: [],
            templateAdd: {
                name: "", //名字
                taskType: "06", //任务类型
                content: "", //备注
                matrix: "02", //优先级
                tags: [], //标签
                dirId: "",
                parentTempId: "",
                docFilePath: [],
            },
            templateEdit: {},
            times: null,
        };
    },
    created() {
        // this.getTreeDataclick()
    },
    methods: {
        tagChooseEdit(data) {
            this.templateEdit.tags = data;
            console.log(this.templateEdit.tags);
        },
        editChildren(data) {
            console.log(data);
            this.times = new Date().getTime();
            this.templateEdit = data.data;
            this.EdidialogFormVisible = true;
        },
        templateEditclick(dataForm) {
          this.$refs[dataForm].validate((valid) => {
            if (valid) {
              this.$delete(this.templateEdit, "docFilePath");
              this.$delete(this.templateEdit, "docList");
              update(this.templateEdit).then((res) => {
                this.EdidialogFormVisible = false;
                this.getTreeDataclick();
              });
            } else {
              console.log('error submit!!');
              return false;
            }
          });


        },
        delectclick() {
            this.taskForm = [];
        },
        uploadListDel(data) {
            this.uploadForm.splice(data, 1);
        },
        uploadListShow(data) {
            this.uploadForm = this.templateAdd.docFilePath;
        },
        returnUrl(data) {
            var docFilePath = {
                fileName: data.name,
                fileUrl: data.url,
            };
            this.uploadForm.push(docFilePath);
        },
        //上传附件（确定按钮）
        uploadSave(val) {
            console.log("这是uploadSave");
            console.log(val);
            let _this = this;
            _this.templateAdd.docFilePath = _this.uploadForm;
            _this.$refs.upload.sucessClick();
        },
        delClick(item, index) {
            var _this = this;
            console.log(item);
            docdel({ ids: item.docId }).then((res) => {
                _this.templateEdit.docList.splice(index, 1);
            });
        },
        uploadListDelEdit(data) {
            this.uploadFormEdit.splice(data, 1);
        },
        uploadListShowEdit(data) {
            // this.uploadFormEdit = this.templateEdit.docFilePath;
        },
        returnUrlEdit(data) {
            var docFilePath = {
                fileName: data.name,
                fileUrl: data.url,
            };
            this.uploadFormEdit.push(docFilePath);
        },
        //上传附件（确定按钮）
        uploadSaveEdit(val) {
            let data = {
                dirId: this.templateEdit.dirId,
                docFilePath: this.uploadFormEdit,
                docType: "11",
                docTypeId: this.templateEdit.tempId,
            };
            saveDoc(data).then((res) => {
                this.uploadFormEdit.forEach((data) => {
                    this.$set(data, "name", data.fileName);
                    this.templateEdit.docList.push(data);
                });
                this.$refs.upload.sucessClick();
                this.uploadFormEdit = [];
            });
        },
        isNUllchang(data) {
            if (utils.isNull(data)) {
                return false;
            } else {
                return true;
            }
        },
        delChildren(taskId) {
            const params = new URLSearchParams();
            params.append("ids", taskId);
            this.$confirm("确认删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                del(params).then((res) => {
                    this.$message("删除成功!");
                    this.getTreeDataclick();
                });
            });
        },
        createdChildren(taskId) {
            this.templateAdd.tags = [];
            this.times = new Date().getTime();
            this.templateAdd.parentTempId = taskId;
            this.dialogFormVisible = true;
        },
        filtercatalogue(data) {
            this.listQuery.dirId = data;
            this.templateAdd.dirId = data;
            if (!utils.isNull(this.templateAdd.dirId)) {
                this.getTreeDataclick();
            }
        },
        getTreeDataclick() {
            getTreeData(this.listQuery).then((res) => {
                this.taskForm = res.data;
            });
        },
        tagChoose(data) {
            this.templateAdd.tags = data;
        },

        templatesaveclick(dataForm) {
          this.$refs[dataForm].validate((valid) => {
            if (valid) {
              templatesave(this.templateAdd).then((res) => {
                this.dialogFormVisible = false;
                this.templateAdd.name = "";
                this.templateAdd.content = "";
                this.templateAdd.tags = [];
                this.templateAdd.parentTempId = "";
                this.templateAdd.docFilePath = [];
                this.getTreeDataclick();
              });
            } else {
              console.log('error submit!!');
              return false;
            }
          });

        },
        btnCreate() {
            this.templateAdd.tags = [];
            this.times = new Date().getTime();
            this.dialogFormVisible = true;
        },
    },
};
</script>
<style scoped>
.app {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    min-height: 100%;
    align-items: stretch;
}

.document-right {
    flex: 1;
    /* padding: 24px; */
    height: calc(100vh - 84px);
    overflow-y: auto;
    background-color: white;
    /* position: relative; */
}

.app_project_app {
    width: 100%;
    padding: 24px 16px 5px 16px;
    display: flex;
    justify-content: space-between;
}

/deep/ .el-main {
    padding-top: 0px;
}

.app_header {
    font-weight: bolder;
    text-transform: none;
    color: rgb(46, 64, 94);
    display: block;
    font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei UI",
        "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial,
        sans-serif;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
}

.app_header_search {
    padding: 0 16px 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f5f6f8;
    height: 50px;
}

.app_search {
    cursor: pointer;
    font-size: 20px;
}

.dropdown {
    cursor: pointer;
    display: block;
    height: auto;
    text-align: left;
    border: none;
    color: #2e405e;
    padding: 0.71428571rem 1.14285714rem !important;
    font-size: 14px;
    text-transform: none;
    font-weight: 400;
    box-shadow: none;
    line-height: 24px;
}

.dropdownslect {
    cursor: pointer;
    display: block;
    height: auto;
    text-align: left;
    border: none;
    color: #2e405e;
    padding: 0.71428571rem 1.14285714rem !important;
    font-size: 14px;
    text-transform: none;
    font-weight: 400;
    box-shadow: none;
    line-height: 24px;
    background-color: #e8f4ff;
    color: #46a6ff;
}

.selectscc {
    background-color: #e8f4ff;
    color: #46a6ff;
}

.app_project {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    justify-content: flex-start;
    /* padding-bottom: 64px; */
}

.app_project_itemtwo {
    width: 30%;
    min-width: 260px;
    /* height: 155px; */
    border-radius: 8px;
    padding: 12px;
    margin-right: 20px;
    margin-bottom: 20px;
    background-color: rgb(242, 245, 253);
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    cursor: pointer;
    /* overflow: hidden; */
}

.app_project_item {
    width: 30%;
    min-width: 260px;
    height: 115px;
    border-radius: 8px;
    padding: 12px;
    margin-right: 20px;
    margin-bottom: 20px;
    background-color: rgb(242, 245, 253);
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    cursor: pointer;
    /* overflow: hidden; */
}

.app_project_heard {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.app_project_heard_text {
    font-size: 16px;
    font-weight: 700;
    color: rgb(46, 64, 94);
}

.app_project_heard_text_span {
    font-size: 14px;
    font-weight: 500;
    color: rgb(144, 154, 170);
}

.project_icon:hover {
    color: rgb(255, 171, 0);
    cursor: pointer;
}

.icon-xingxing-huang {
    color: rgb(255, 171, 0);
}

.app_project_botton {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
}

.app_project_botton_avater {
    display: flex;
    align-items: center;
}

.app_project_botton_avater_image {
    width: 23px;
    height: 23px;
    border-radius: 50%;
}

.app_project_botton_avater_text {
    color: rgb(144, 154, 170);
    font-size: 14px;
    line-height: 24px;
    margin-left: 10px;
    display: inline-block;
    width: 100px;
}

.app_project_botton_icon {
    font-size: 14px;
}

.app_project_botton_xin {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    width: 150px;
    height: 100%;
    font-family: gitee-icon;
    font-size: 14px;
    font-style: normal;
    color: rgb(144, 154, 170);
}

.project-item-conent-header-right {
    color: #909aaa;
    font-size: 18px;
    cursor: pointer;
}

.project-item-conent-header-right-choose {
    color: #ff991f;
    font-size: 18px;
    cursor: pointer;
}

.project-item-conent-header-right:hover {
    color: #ff991f;
}

.app_project_botton_xin_div {
    /*width: 35px;*/
}

.ge_content_left_span {
    /* width: 30px; */
    border-radius: 5px;
    padding: 2px;
    font-size: 12px;
    display: inline-block;
    color: #2c7ef8;
    border-color: #2c7ef8;
    border: solid 1px #2c7ef8;
    margin-right: 16px;
}

.projcharinone {
    display: none;
}

.projcharintwo {
    display: block;
    transition: height 1s;
}

.eldiv {
    width: 100%;
    text-align: center;
}

.projcharinspan {
    padding: 10px 0px 0px 10px;
    display: flex;
    justify-content: space-between;
}

.proj_pagination {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-tree-node {
    display: flex;
    justify-content: space-between;
}

.popover-content-top-title {
    color: #2e405e;
    font-size: 14px;
    display: block;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    cursor: pointer;
}

.popover-content-top-title:hover {
    background-color: #f5f6f8;
    color: #2e405e;
    font-size: 14px;
    display: block;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.container_top_heard_span {
    width: 50px;
    font-size: 14px;
    color: rgb(144, 154, 170);
    margin-left: 10px;
    cursor: pointer;
}

[v-cloak] {
    display: none !important;
}

.task-multipleChoiceTags {
    /* width: 910px; */
    display: flex;
    margin-top: 20px;
}
</style>

